<template>
  <div class="category">
    <nav-bar class="nav-bar">
      <div slot="center">商品分类</div>
    </nav-bar>
    <div class="category-content">
      <tab-menu :categoryList="categoryList" @selectClick="selectClick"></tab-menu>
      <scroll id="tabContent" :data="[categoryData]" ref="scroll">
          <tab-content-category :subCategories="showSubCategory"></tab-content-category>
          <tab-control :title="['综合', '新品', '销量']" @tabClick="tabClick" ref="tabControl"></tab-control>
          <goods-list :goods="showCategoryDetail"></goods-list>
      </scroll>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";

import TabMenu from "./childComps/TabMenu";
import TabContentCategory from "./childComps/TabContentCategory";


import GoodsList from "components/content/goods/GoodsList";
import TabControl from "components/content/tabControl/TabControl";
import Scroll from "components/common/scroll/Scroll";


import {getCategory, getSubcategory, getCategoryDetail} from "network/category";

export default {
  name: "Category",
  components: {
    GoodsList,
    TabControl,
    TabMenu,
    NavBar,
    Scroll,
    TabContentCategory
  },
  data() {
    return {
      categoryList: [],
      currentIndex: -1,
      // 获取tab-menu下的所有商品
      categoryData: {},
      currentType: 'pop'
    }
  },
  created() {
    this._getCategory()

    this.$bus.$on('imgLoad', () => {
      this.$refs.scroll.refresh()
    })
  },
  computed: {
    showSubCategory() {
      if (this.currentIndex === -1) return
      return this.categoryData[this.currentIndex].subcategories;
    },
    showCategoryDetail() {
      if(this.currentIndex === -1) return;
      return this.categoryData[this.currentIndex].categoryDetail[this.currentType]
    }
  },
  methods: {
    _getCategory() {
      // 获取分类数据
      getCategory().then(res => {
        console.log(res)
        this.categoryList = res.data.category.list;
        for (let i = 0; i < this.categoryList.length; i++) {
          this.categoryData[i] = {
            subcategories: {},
            categoryDetail: {
              'pop': [],
              'new': [],
              'sell': []
            }
          }
        }
        this._getSubcategory(0)
      })

    },
    _getSubcategory(index) {
      this.currentIndex = index;
      const mailKey = this.categoryList[index].maitKey;
      getSubcategory(mailKey).then(res => {
        console.log(res)
        this.categoryData[index].subcategories = res.data;
        this.categoryData = {...this.categoryData};
        this._getCategoryDetail('pop');
        this._getCategoryDetail('sell');
        this._getCategoryDetail('new')
      })
    },

    _getCategoryDetail(type) {
      this.currentType = type;
      const miniWallkey = this.categoryList[this.currentIndex].miniWallkey;
      getCategoryDetail(miniWallkey, type).then(res => {
        // console.log(res);
        this.categoryData[this.currentIndex].categoryDetail[type] = res
        this.categoryData = {...this.categoryData}
      })
    },
    selectClick(index) {
      this._getSubcategory(index)
    },
    tabClick(index) {
      console.log(index)
      switch (index) {
        case 0:
          this.currentType = 'pop';
          break;
        case 1:
          this.currentType = 'new';
          break;
        case 2:
          this.currentType = 'sell';
          break;
      }
      this.$refs.tabControl.currentIndex = index;
    }
  }
}
</script>

<style scoped>
.category {
  position: relative;
  height: 100vh;
}

.nav-bar {
  background-color: var(--color-tint);
  font-weight: 700;
  color: #fff;
  position: relative;
  z-index: 999;
}

.category-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 49px;
  display: flex;
  overflow: hidden;
}
#tab-content {
  flex: 1;
}
</style>
